<script setup lang="ts">
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { reactive, ref } from 'vue'
import instance from '@/utils/serve'

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  fromInfo: {
    type: Object,
    default: () => {}
  }
})
const emit = defineEmits<{
  (e: 'update:isShow', value: boolean): void
  (e: 'getDicData'): void
}>()

const saving = ref(false)
interface RuleForm {
  dict_id: string
  dict_name: string
  is_tree: string
}
const formRules = reactive<FormRules<RuleForm>>({
  dict_id: [{ required: true, message: '请输入字典编码' }],
  dict_name: [{ required: true, message: '请输入字典名' }],
  is_tree: [{ required: true, message: '请选择' }]
})
const ruleFormRef = ref<any>()
const form = ref({
  dict_id: '',
  dict_name: '',
  is_tree: ''
})
const resetFrom = ref({
  dict_id: '',
  dict_name: '',
  is_tree: ''
})
if (props.title === '修改字典') {
  form.value.dict_id = props.fromInfo.dict_id
  form.value.dict_name = props.fromInfo.dict_name
  form.value.is_tree = props.fromInfo.is_tree
} else {
  form.value = resetFrom.value
}

const Confirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      // console.log('submit!', form.value)
      const params = {
        dict_id: form.value.dict_id,
        dict_name: form.value.dict_name,
        is_tree: form.value.is_tree,
        mode: 'new',
        dbName: 'report'
      }
      await instance
        .post('/dict/saveDict', params)
        .then((res: any) => {
          console.log(res)

          if (res.code == 0) {
            ElMessage({ message: '新增字典成功', type: 'success' })
          } else {
            ElMessage({ message: '新增字典失败', type: 'success' })
          }
        })
        .catch((err: any) => {
          console.log(err)
          ElMessage({ message: '新增字典失败', type: 'error' })
        })
        .finally(() => {
          saving.value = false
          emit('getDicData')
          emit('update:isShow', false)
        })
      // saveFormFn()
    } else {
      ElMessage({ message: '请输入完整信息', type: 'error' })
    }
  })
  emit('update:isShow', false)
}

const Cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  form.value = resetFrom.value
  emit('update:isShow', false)
}
</script>
<template>
  <div>
    <el-dialog :title="title" width="30%" :model-value="isShow" @close="Cancel(ruleFormRef)">
      <el-form :model="form" :rules="formRules" ref="ruleFormRef" label-width="auto">
        <el-form-item label="字典编码" prop="dict_id"
          ><el-input v-model="form.dict_id" clearable :disabled="title == '修改字典'"></el-input
        ></el-form-item>
        <el-form-item label="字典名称" prop="dict_name"
          ><el-input v-model="form.dict_name" clearable></el-input
        ></el-form-item>
        <el-form-item label="树形结构" prop="is_tree">
          <el-select v-model="form.is_tree" class="w-100" :disabled="title == '修改字典'">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <span>
          <el-button @click="Cancel(ruleFormRef)">取消</el-button>
          <el-button type="primary" :loading="saving" @click="Confirm(ruleFormRef)">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped lang="less"></style>
